<!--
* @author wn
* @date 2022/09/02 11:28:15
* @description: 个人中心 左侧边栏组件

链接激活时使用的 CSS 类名

根据当前路由 来匹配 是否 active
exact-active-class="active"精准匹配
路由是 /member  只有 /member 的 a 标签才可以 有active class
也可以 less 中 .router-link-exact-active{}

active-class="active"  当前路由开头即可--激活自身 和 上一级
路由是 /member   /member开头的  的 a 标签才都可以 有active class
比如 当前路由是 /member  /(上一级)  也会  /member/xxx  不会
也可以 less 中 .router-link-active{}

如果比较多  可以在 router--index 中  配置   统一修改
linkActiveClass       :   'active'
linkExactActiveClass  :   'active'

!-->
<template>
	<aside class="app-member-aside">
		<h4>我的账户</h4>
		<router-link to="/member" exact-active-class="active">
			个人中心
		</router-link>
		<a href="javascript:;">消息通知</a>
		<a href="javascript:;">个人信息</a>
		<a href="javascript:;">安全设置</a>
		<a href="javascript:;">地址管理</a>
		<a href="javascript:;">我的积分</a>
		<a href="javascript:;">我的足迹</a>
		<a href="javascript:;">邀请有礼</a>
		<a href="javascript:;">幸运抽奖</a>
		<h4>交易管理</h4>
		<router-link to="/member/order"> 我的订单 </router-link>
		<a href="javascript:;">优惠券</a>
		<a href="javascript:;">礼品卡</a>
		<a href="javascript:;">评价晒单</a>
		<a href="javascript:;">售后服务</a>
		<h4>我的收藏</h4>
		<a href="javascript:;">收藏的商品</a>
		<a href="javascript:;">收藏的专题</a>
		<a href="javascript:;">关注的品牌</a>
		<h4>帮助中心</h4>
		<a href="javascript:;">帮助中心</a>
		<a href="javascript:;">在线客服</a>
	</aside>
</template>
<script>
export default {
	name: 'AppMemberAside',
}
</script>
<style scoped lang="less">
.app-member-aside {
	width: 220px;
	border-radius: 2px;
	background-color: #fff;
	h4 {
		padding-top: 8px;
		line-height: 40px;
		padding-left: 52px;
		font-size: 18px;
		font-weight: 500;
		border-top: 1px solid #f6f6f6;
	}
	// .links {
	// 	padding-left: 52px;
	// }
	a {
		display: block;
		position: relative;
		line-height: 40px;
		font-size: 14px;
		color: #666;
		margin-left: 52px;
		&::before {
			display: none;
			position: absolute;
			top: 19px;
			left: -16px;
			content: '';
			width: 6px;
			height: 6px;
			border-radius: 50%;
			background-color: @xtxColor;
		}
		&:hover {
			color: @xtxColor;
		}
		&.active {
			color: @xtxColor;
			&::before {
				display: block;
			}
		}
	}
}
</style>
